<template>
  <div class="login-container">
    <div class="logo">
      <div class="logo-icon">
        <van-icon name="shop-o" size="48" color="#1989fa" />
      </div>
      <h2>店家管理系统</h2>
    </div>
    
    <van-form @submit="onSubmit" class="login-form">
      <!-- 显示可能的错误消息 -->
      <div v-if="errorMessage" class="error-message">
        {{ errorMessage }}
      </div>
      
      <van-cell-group inset>
        <van-field
          v-model="account"
          name="账号"
          label="账号"
          placeholder="请输入账号"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      
      <div class="submit-btn">
        <van-button round block type="primary" native-type="submit" :loading="loading">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'
import { login, isLoggedIn } from '../api/user'

const router = useRouter()
const route = useRoute()

const account = ref('')
const password = ref('')
const loading = ref(false)
const errorMessage = ref('')

// 在组件挂载时检查是否已登录或者URL中是否有错误信息
onMounted(() => {
  console.log('登录页面加载完成')
  
  // 从URL解析错误信息
  if (route.query.error) {
    errorMessage.value = decodeURIComponent(route.query.error as string)
  }
  
  // 检查用户是否已登录
  if (isLoggedIn()) {
    console.log('用户已登录，重定向到首页')
    handleRedirect()
  }
  
  // 调试信息
  if (route.query.redirect) {
    console.log('登录页重定向参数:', route.query.redirect)
  }
})

// 处理表单提交
const onSubmit = async () => {
  // 清除之前的错误信息
  errorMessage.value = ''
  
  try {
    // 设置加载状态
    loading.value = true
    console.log('开始登录，账号:', account.value)
    
    // 调用登录API
    const userInfo = await login({
      userAccount: account.value,
      password: password.value
    })
    
    // 登录成功处理
    if (userInfo) {
      console.log('登录成功，获取到用户信息:', userInfo)
      showToast({ type: 'success', message: '登录成功' })
      
      // 增加延迟确保localStorage中的token已保存
      setTimeout(() => {
        console.log('开始跳转，token状态:', isLoggedIn())
        
        try {
          // 使用简单的方式强制跳转到首页
          window.location.href = '/'
        } catch (navigationError) {
          console.error('导航错误:', navigationError)
          // 如果路由跳转失败，使用最原始的跳转方式
          window.location.replace('/')
        }
      }, 500)
    } else {
      // 登录失败处理
      console.error('未获取到用户信息')
      errorMessage.value = '账号或密码错误，请重试'
    }
  } catch (error) {
    console.error('登录过程中发生错误:', error)
    errorMessage.value = '登录失败，请稍后再试'
  } finally {
    // 无论成功或失败，都取消加载状态
    loading.value = false
  }
}

// 处理重定向逻辑
const handleRedirect = () => {
  console.log('处理重定向...')
  
  // 检查URL中是否有重定向参数
  const redirectUrl = route.query.redirect as string
  
  if (redirectUrl) {
    try {
      console.log('原始重定向URL:', redirectUrl)
      
      // 解析URL
      let finalRedirectUrl = redirectUrl;
      
      // 如果URL包含问号，确保正确处理多个问号的情况
      const firstQuestionMarkIndex = finalRedirectUrl.indexOf('?')
      if (firstQuestionMarkIndex !== -1) {
        // 提取路径和查询部分
        const path = finalRedirectUrl.substring(0, firstQuestionMarkIndex)
        // 获取问号后的所有内容
        const queryString = finalRedirectUrl.substring(firstQuestionMarkIndex + 1)
        // 将其中所有的问号替换为&符号
        const processedQueryString = queryString.replace(/\?/g, '&')
        // 重新组合URL
        finalRedirectUrl = `${path}?${processedQueryString}`
        console.log('处理后的重定向URL:', finalRedirectUrl)
      }
      
      // 确保URL以/开头
      if (!finalRedirectUrl.startsWith('/')) {
        finalRedirectUrl = '/' + finalRedirectUrl
      }
      
      console.log('最终重定向到:', finalRedirectUrl)
      router.replace(finalRedirectUrl)
    } catch (error) {
      console.error('重定向URL处理失败:', error)
      // 重定向URL无效，导航到首页
      router.replace('/')
    }
  } else {
    // 没有重定向参数，默认导航到首页
    console.log('无重定向参数，返回首页')
    router.replace('/')
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #f7f8fa;
  padding: 20px;
}

.logo {
  text-align: center;
  margin-bottom: 30px;
}

.logo-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e6f0ff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(25, 137, 250, 0.2);
}

.logo h2 {
  color: #323233;
  font-size: 24px;
  margin: 0;
}

.login-form {
  width: 100%;
  max-width: 350px;
}

.submit-btn {
  margin-top: 24px;
}

.error-message {
  color: #ee0a24;
  font-size: 14px;
  text-align: center;
  margin-bottom: 16px;
  padding: 8px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(238, 10, 36, 0.1);
}
</style> 